
$font-size = 1;

.page-loading
.page-loading-fullscreen
  min-height 100%
  // background #0E1226

  .page-loading-square
    position absolute
    top 45%
    left 50%
    transform translate(-50%, -50%)
    padding 25px
    
    border-radius 12px
    font-size: 12px
    line-height: 1.5



.loading-icon {
  position relative
  height:($font-size)em;
  width:($font-size)em;
  border-radius:100%;
  background: #FF008C;
  display:block;

  margin:1em auto 2em;
  animation:spin 2s ease infinite;
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    height:inherit;
    width:inherit;
    background:inherit;
    border-radius:inherit;
    animation:spin 2s ease infinite;
  }
  &:before{
    left:-($font-size*1.15)em;
  }
  &:after{
    left:($font-size*1.15)em;  
  }
}

  @keyframes spin{
    0%{
      top:0;
      transform:rotate(0deg);
    }
    50%{
      top:-($font-size*2)em;
      transform:rotate(-180deg);
    }
    100%{
      top:0;
      transform:rotate(-360deg);
    }
  }
.page-loading-fullscreen
  position fixed
  height 100vh
  left 0
  right 0
  top 0
  bottom 0
  z-index 90

  .page-loading-square
    background rgba(255, 255, 255, 0.8)
    box-shadow 5px 8px 10px rgba(0, 0, 0, 0.1)


